<div class="main-body">

    <div class="ul-section ul-bg-white ul-padding-md">
        <div>
            <span>我的PAC地址:</span>
            <a href="{$pac_url}" target="_blank">{$pac_url}</a>
            <span class="layui-btn layui-btn-xs copy" data-clipboard-text="{$pac_url}">复制</span>
        </div>
        <div>
            <span>我的PAC地址(预览):</span>
            <a href="{$pac_preview_url}" target="_blank">{$pac_preview_url}</a>
        </div>
        <div style="margin-top:15px">

            <input type="text" name="proxy" value="{$user->pac_proxy}" placeholder="var __PROXY__ = 'PROXY 127.0.0.1:1080;';" class="layui-input">
            <p class="layui-word-aux">pac文件中的代理地址,默认不需要修改,为空即可,具体问题可查看使用说明</p>
        </div>
        <div class="layui-form" lay-filter="pac-form" style="margin-top:15px">
            <select name="pac_mode" lay-filter="pac-mode">
                <option value="default">默认设置</option>
                <option value="mine">只用我的设置</option>
                <option value="strict">使用严格的设置</option>
            </select>

        </div>
    </div>

    <div class="">
        <div class="ul-nav-button">
            <div class="ul-nav-button-item create">
                <div class="ul-nav-button-icon">
                    <i class="icon layui-icon layui-icon-add-circle"></i>
                </div>
                <div class="ul-nav-button-info">
                    <div class="ul-nav-button-title">
                        添加PAC规则
                    </div>
                    <div class="ul-nav-button-desc">
                        添加自定义的PAC规则
                    </div>
                </div>
            </div>
            <a href="{:sysconfig('site','help_url')}" target="_blank" class="ul-nav-button-item help">
                <div class="ul-nav-button-icon">
                    <i class="icon layui-icon layui-icon-help"></i>
                </div>
                <div class="ul-nav-button-info">
                    <div class="ul-nav-button-title">
                        使用说明
                    </div>
                    <div class="ul-nav-button-desc">
                        规则说明/PAC功能说明/收录说明
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="ul-section ul-bg-white ul-padding-md ">
        <div class="layui-form" lay-filter="rule-table">
            <table class="layui-table" lay-size="sm" lay-skin="line">
                <thead>
                    <tr>
                        <th>规则</th>
                        <th>状态</th>
                        <th>公共库</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {empty name='list_rule'}
                    <tr>
                        <td colspan="4">暂无数据,快去添加吧</td>
                    </tr>
                    {else /}
                    {volist name='list_rule' id='vo'}
                    <tr class="item" data-id="{$vo.id}">
                        <td>{$vo.content}</td>
                        <td>
                            {volist name='list_status' id='status'}
                            <input type="radio" name="{$vo.id}" value="{$key}" {eq name='$vo.status' value='$key' }checked{else/}{/eq} title="{$status}" lay-filter="status-radio">
                            {/volist}
                        </td>
                        <td>{$vo.public_status_name}</td>
                        <td>
                            <div>
                                <div class="layui-btn layui-btn-xs delete">删除</div>
                            </div>
                        </td>
                    </tr>
                    {/volist}
                    {/empty}

                </tbody>
            </table>
        </div>
    </div>

    <script>
        $('.create').click(function () {
            layer.prompt({
                formType: 2,
                title: '添加规则',
                maxlength: 99999999999

            }, function (value) {


                $.upost('{:url("saveRule")}', {
                    content: value
                }, function (result) {
                    layer.msg('添加成功');

                    setTimeout(() => {
                        location.reload()
                    }, 1200);
                })

            })
        })

        $('.delete').click(function () {
            var item = $(this).closest('.item');

            layer.confirm('确定要删除吗?', function () {
                $.upost('{:url("deleteRule")}', {
                    id: item.data('id')
                }, function () {
                    layer.msg('删除成功');
                    setTimeout(() => {
                        location.reload()
                    }, 1200);
                })
            })
        })

        layui.form.on('radio(status-radio)', function (data) {

            var id = $(data.elem).attr('name')

            var value = data.value

            $.post('{:url("updateRule")}', {
                id: id,
                status: value
            }, (result) => {
                loading.hide()

                if (result.code == 500) {
                    layer.msg(result.msg)
                    layui.form.val('rule-table', {
                        [id]: result.data.status
                    })
                    return false;
                }

                layer.msg('设置成功')
            })

        })

        layui.form.val('pac-form', {
            pac_mode: '{$user.pac_mode}'
        })

        layui.form.on('select(pac-mode)', function (data) {
            console.log(data);
            $.upost('{:url("updatePacMode")}', {
                pac_mode: data.value
            }, function (result) {
                loading.hide();
                layer.msg('设置成功')
            })
        })

        $('input[name="proxy"]').change(function () {
            var value = $(this).val();

            $.upost('{:url("updatePacProxy")}', {
                pac_proxy: value
            }, () => {
                loading.hide();
            })
        })

        var clipboard = new ClipboardJS('.copy');

        clipboard.on('success', function (e) {
            layer.msg('复制成功')
        });

        clipboard.on('error', function (e) {
            layer.msg('复制失败')
        });

    </script>


</div>